<template>
    <div>
        <nav style="text-align:center;"
            class="layout-navbar navbar navbar-expand-lg align-items-lg-center bg-white container-p-x">
            <hr class="d-lg-none w-100 my-2">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item active">驾校教练管理</li>
                <li class="breadcrumb-item active">教练管理表</li>
            </ol>

            <div class="navbar-nav align-items-lg-center ml-auto">
                <div class="demo-navbar-notifications nav-item dropdown mr-lg-3">
                    <a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown">
                        <i class="feather icon-bell navbar-icon align-middle"></i>
                        <span class="badge badge-danger badge-dot indicator"></span>
                        <span class="d-lg-none align-middle">&nbsp; Notifications</span>
                    </a>
                </div>
                <div class="nav-item d-none d-lg-block text-big font-weight-light line-height-1 opacity-25 mr-3 ml-1">|
                </div>
                <div class="demo-navbar-messages nav-item dropdown mr-lg-3">
                    <a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown">
                        <i class="feather icon-mail navbar-icon align-middle"></i>
                        <span class="badge badge-success badge-dot indicator"></span>
                        <span class="d-lg-none align-middle">&nbsp; Messages</span>
                    </a>
                </div>
            </div>
        </nav>
        <!-- DataTable within card -->
        <div class="card">
            <div class="card-datatable table-responsive">
                <div id="DataTables_Table_1_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_length" id="DataTables_Table_1_length">
                                <label style="margin-left:300px;">
                                    <font _mstmutation="1" _msthash="957099" _msttexthash="5609370">显示
                                    </font><select name="DataTables_Table_1_length" aria-controls="DataTables_Table_1"
                                        class="form-control form-control-sm">
                                        <option value="2">2
                                        </option>
                                        <option value="5">5
                                        </option>
                                        <option value="10">10
                                        </option>
                                        <option value="15">15
                                        </option>
                                    </select>
                                    <font _mstmutation="20">条目
                                    </font>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div id="DataTables_Table_1_filter" class="dataTables_filter"><label
                                    style="margin-right:300px;">
                                    <font _mstmutation="1" _msthash="959244" _msttexthash="13304486">搜索：
                                    </font><input type="search" class="form-control form-control-sm"
                                        placeholder="搜索你想要的内容" aria-controls="DataTables_Table_1">&nbsp;&nbsp;&nbsp;<i
                                        class="feather icon-search navbar-icon align-middle"></i>
                                </label></div>
                        </div>
                    </div>
                    <div class="row st-table">
                        <div class="col-sm-12">
                            <el-table class="datatables-demo table table-striped table-bordered dataTable no-footer"
                                id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info"
                                :data="coach">
                                <el-table-column prop="c_id" label="id" class="gradeA odd" role="row">
                                    <template slot-scope="scope">
                                        <span v-show="!scope.row.c_iseditor">{{ scope.row.c_id }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="c_img" label="照片">
                                    <template slot-scope="scope">
                                        <span v-show="!scope.row.c_iseditor"><img :src="scope.row.c_img" height="50px"
                                                alt=""></span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="c_name" label="教练名">
                                    <template slot-scope="scope">
                                        <input type="text" v-model="scope.row.c_name" v-show="scope.row.c_iseditor" ref="name"/>
                                        <span v-show="!scope.row.c_iseditor">{{ scope.row.c_name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="c_dscool" label="所在驾校">
                                    <template slot-scope="scope">
                                        <input type="text" v-model="scope.row.c_dscool" v-show="scope.row.c_iseditor" ref="dscool"/>
                                        <span v-show="!scope.row.c_iseditor">{{ scope.row.c_dscool }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="c_age" label="教龄">
                                    <template slot-scope="scope">
                                        <input type="text" v-model="scope.row.c_age" v-show="scope.row.c_iseditor" ref="age"/>
                                        <span v-show="!scope.row.c_iseditor">{{ scope.row.c_age }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="c_hour_price" label="小时学费">
                                    <template slot-scope="scope">
                                        <input type="text" v-model="scope.row.c_hour_price"
                                            v-show="scope.row.c_iseditor" ref="price" />
                                        <span v-show="!scope.row.c_iseditor">{{ scope.row.c_hour_price }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="c_score" label="分数">
                                    <template slot-scope="scope">
                                        <input type="text" v-model="scope.row.c_score" v-show="scope.row.c_iseditor" ref="score"/>
                                        <span v-show="!scope.row.c_iseditor">{{ scope.row.c_score }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="c_subjects" label="陪练科目">
                                    <template slot-scope="scope">
                                        <input type="text" v-model="scope.row.c_subjects"
                                            v-show="scope.row.c_iseditor"  ref="subjects"/>
                                        <span v-show="!scope.row.c_iseditor">{{ scope.row.c_subjects }}</span>
                                    </template>
                                </el-table-column>
                                    <el-table-column prop="date" label="编辑/添加/删除">
                                        <template slot-scope="scope" >
                                                <el-button class="spp" type="text" @click="update(scope.row, scope)"  v-show="!scope.row.c_iseditor">修改</el-button>
                                                <el-button class="spp" type="text" @click="add"  v-show="!scope.row.c_iseditor">添加</el-button>
                                                <el-button class="spp text" type="text" @click="open"  v-show="!scope.row.c_iseditor">删除</el-button>
                                        
                                                 <el-button type="primary" @click="save(scope.row)"  v-show="scope.row.c_iseditor">保存</el-button>
                                        </template>
                                    </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_1_paginate">
                                <ul class="pagination">
                                    <li class="paginate_button page-item previous" id="DataTables_Table_1_previous"><a
                                            href="#" aria-controls="DataTables_Table_1" data-dt-idx="0" tabindex="0"
                                            class="page-link" _msthash="886939" _msttexthash="4029103">上一页</a></li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="1" tabindex="0"
                                            class="page-link" _msthash="1128868" _msttexthash="4459">1</a>
                                    </li>
                                    <li class="paginate_button page-item active"><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="2" tabindex="0"
                                            class="page-link" _msthash="1396863" _msttexthash="4550">2</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="3" tabindex="0"
                                            class="page-link" _msthash="1690923" _msttexthash="4641">3</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="4" tabindex="0"
                                            class="page-link" _msthash="2011048" _msttexthash="4732">4</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="5" tabindex="0"
                                            class="page-link" _msthash="2357238" _msttexthash="4823">5</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="6" tabindex="0"
                                            class="page-link" _msthash="2729493" _msttexthash="4914">6</a>
                                    </li>
                                    <li class="paginate_button page-item next" id="DataTables_Table_1_next">
                                        <a href="#" aria-controls="DataTables_Table_1" data-dt-idx="7" tabindex="0"
                                            class="page-link" _msthash="680980" _msttexthash="6235931">下一页</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<!-- cropper -->
<script src="assets/libs/cropper/cropper.js"></script>
<script src="assets/js/pages/ui_cropper.js"></script>
<!-- Demo -->
<script src="assets/js/script.js"></script>
<script src="assets/js/vendor.js"></script>
<script src="assets/libs/datatables/datatables.js"></script>
<script src="assets/js/pages/tables_datatables.js"></script>
<script src="assets/js/script.js"></script>
<script type="text/javascript">
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script>
<script>
import '/public/css/googleapis.css'
import '/public/libs/cropper/cropper.css'
import '/public/css/style.css'
import '/public/libs/datatables/datatables.css'
import '/public/css/coach.css'
    export default {
        data() {
            return {
                coach:[],
            }
        },
        mounted () {
           this.getData()
        },
        methods: {
            getData() {
                var url='dtb/coach'
                this.axios.get(url).then(res=>{
                // console.log(res);
                this.coach=res.data.data
            })
            },
         open(index) {
         this.$confirm('永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let id=this.coach[index].c_id
        this.axios.delete(`dtb/coachDelete/${id}`).then(res=>{
            this.getData()
        })
          this.$message({
            type: 'success',
            message: '删除第'+this.coach[index].c_id+'条成功!', 
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

       add(index) {
        this.$confirm('添加文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });          
        });
      },
         update(row,index) {
          console.log('row:'+row,row.c_id);
          row.c_iseditor = true;
          this.$confirm('修改文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            //  let id=this.coach[index].c_id
            //  console.log(id);
            // console.log(1,this.$refs.row)
        this.axios.delete(`dtb/coachUpdate/${row.id}`).then(res=>{
            this.getData()
              this.$message({
            type: 'success',
            message: '修改第'+row.c_id+'条成功!', 
          });
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '修改失败'
          });          
        })
      }, 
      
  save(row, index) {
         row.c_iseditor = false;
          this.$confirm('保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '保存成功!'
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '保存修改'
          });          
        })
         
        },
          },
    }
</script>

<style lang="scss" scoped>
.st-table{
    input{
        border:none;
    }
    input:hover{
         border:1px solid rgb(166, 163, 196);
    }
}
.datatables-demo{
    height: 300px;
    overflow-y: scroll;
}
.card{
    height: 1000px;
}

/* 滚动条样式 demo*/
.card::-webkit-scrollbar {
width: 10px;
  /*滚动条整体样式*/
}
.card::-webkit-scrollbar-thumb {
  width: 3px;
  background: #eee6;
  /*滚动条里面小方块*/
  border-radius:8px;
}
.card::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
 background-color: #99a9bf;
}
th {
    color: cornflowerblue;
    font-weight: bolder;
    line-height: 60px;
    font-size: 20px;
}
.el-main[data-v-54c38a05]{
    line-height: 30px;
    .breadcrumb{
        line-height: 30px;
        position: relative;
        top: 10px;
        li{
          color: fade-in($color: #8082fb, $amount: 0);
        }
    }
}
.row>div{
    line-height: 50px;
    position: relative;
    top: 15px;
}
tr>td {
    line-height: 30px;
    width: 250px;
    .spp{
    width: 50px;
    margin:0 10px;
    display: inline-block;
    background-color: #fff;
}
.spp:first-child{
background-color: rgb(138, 162, 232);
color: #fff;
border-radius: 20px;
user-select: none;
cursor: pointer;
}
.spp:nth-child(2){
background-color: rgb(149, 213, 255);
color: #fff;
border-radius: 20px;
user-select: none;
cursor: pointer;
}
.text{
background-color: rgb(224, 188, 255) !important;
color: #fff;
border-radius: 20px;
user-select: none;
cursor: pointer;
}
}
</style>
